<template>
	<view class="container">
		<!-- Loading 状态 -->
		<view class="loading-wrapper" v-if="pageLoading">
			<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
		</view>
		
		<view class="content" v-else>
			<!-- 顶部提示 -->
			<view class="header">
				<view class="tip-bar">
					<uni-icons type="info" size="16" color="#666"></uni-icons>
					<text>{{ isMultiSelect ? '点击选择要移动的项' : '长按拖动可调整顺序' }}</text>
				</view>
				
				<view class="action-buttons">
					<!-- 多选按钮 -->
					<view 
						class="action-btn"
						:class="{ active: isMultiSelect }"
						@tap="toggleMultiSelect"
					>
						<text class="iconfont icon-duoxuan"></text>
						<text>{{ isMultiSelect ? '取消' : '多选' }}</text>
					</view>
					
					<!-- 布局切换按钮 -->
					<view class="action-btn" @tap="showLayoutOptions">
						<text class="iconfont" :class="currentLayout.icon"></text>
						<text>{{ currentLayout.name }}</text>
					</view>
				</view>
			</view>
			
			<!-- 媒体列表 -->
			<view :class="['media-list', currentLayout.value]">
				<view 
					class="media-item"
					v-for="(media, index) in (dragIndex === -1 ? mediaList : tempList)"
					:key="media.id"
					:data-id="media.id"
					:data-index="index"
					@longpress="startDrag"
					@touchmove.prevent="onDrag"
					@touchend="endDrag"
					@tap="handleItemClick(media)"
					:class="{ 
						'dragging': dragIndex === index,
						'selected': selectedItems.some(item => item.id === media.id)
					}"
					:style="{ 
						transform: dragIndex === index ? `translate3d(0, ${dragOffset}px, 0)` : '',
						transition: dragIndex === -1 ? 'transform 0.3s' : 'none',
						'z-index': dragIndex === index ? 100 : 1
					}"
				>
					<!-- 选中标记 -->
					<view 
						v-if="isMultiSelect"
						class="select-mark"
						:class="{ active: selectedItems.some(item => item.id === media.id) }"
					>
						<text class="iconfont icon-duihao"></text>
					</view>
					
					<!-- 序号 -->
					<view class="order-num" @tap="showOrderInput(media)">
						<text>{{ media.order }}</text>
					</view>
					
					<!-- 媒体预览 -->
					<view class="media-preview" @tap="showOrderInput(media)">
						<image 
							v-if="media.media_type === '图片'"
							:src="api.BASE_URL + media.media_url"
							mode="aspectFill"
							class="preview-image"
						></image>
						<video
							v-else-if="media.media_type === '视频'"
							:src="api.BASE_URL + media.media_url"
							class="preview-video"
						></video>
					</view>
				</view>
			</view>
			
			<!-- 添加移动到这里的提示 -->
			<view 
				v-if="isMultiSelect && selectedItems.length > 0"
				class="move-tip"
			>
				<text>选中 {{ selectedItems.length }} 项，点击目标位置移动到其后面</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btns">
			<button 
				class="save-btn"
				:disabled="submitting"
				@tap="saveOrder"
			>
				{{ submitting ? '保存中...' : '保存修改' }}
			</button>
		</view>

		<!-- 添加序号输入弹窗 -->
		<uni-popup ref="orderPopup" type="dialog">
			<uni-popup-dialog
				ref="popupDialog"
				title="修改序号"
				:value="inputOrder"
				mode="input"
				placeholder="请输入要交换的位置序号"
				@confirm="confirmOrder"
				@close="closeOrderPopup"
				:beforeClose="true"
				inputType="number"
			>
				<view class="input-wrapper">
					<input 
						type="number"
						v-model="inputOrder"
						class="uni-input"
						:placeholder="`请输入要交换的位置序号`"
						@confirm="handleInputConfirm"
					/>
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<!-- 添加布局选择弹窗 -->
		<uni-popup ref="layoutPopup" type="bottom">
			<view class="layout-options">
				<view class="title">选择布局方式</view>
				<view class="options-list">
					<view 
						class="option-item"
						v-for="layout in layoutOptions" 
						:key="layout.value"
						@tap="selectLayout(layout)"
						:class="{ active: currentLayout.value === layout.value }"
					>
						<text class="iconfont" :class="layout.icon"></text>
						<text>{{ layout.name }}</text>
					</view>
				</view>
				<button class="cancel-btn" @tap="closeLayoutPopup">取消</button>
			</view>
		</uni-popup>

		<!-- 添加多选弹窗 -->
		<uni-popup ref="multiSelectPopup" type="bottom">
			<view class="multi-select-popup">
				<view class="popup-header">
					<text class="title">选择要移动的项</text>
					<view class="header-right">
						<text class="selected-count" v-if="selectedItems.length">
							已选择 {{ selectedItems.length }} 项
						</text>
						<button 
							class="confirm-btn"
							:disabled="!selectedItems.length"
							@tap="showTargetSelect"
						>下一步</button>
					</view>
				</view>
				
				<scroll-view 
					class="media-scroll"
					scroll-y
				>
					<view class="multi-select-list">
						<view 
							class="select-item"
							v-for="media in mediaList"
							:key="media.id"
							@tap="toggleSelect(media)"
							:class="{ active: selectedItems.some(item => item.id === media.id) }"
						>
							<view class="media-content">
								<image 
									v-if="media.media_type === '图片'"
									:src="api.BASE_URL + media.media_url"
									mode="aspectFill"
									class="media-image"
								></image>
								<video
									v-else-if="media.media_type === '视频'"
									:src="api.BASE_URL + media.media_url"
									class="media-video"
								></video>
								<view class="order-badge">{{ media.order }}</view>
							</view>
							<view class="select-mark">
								<text class="iconfont icon-duihao"></text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 添加目标位置选择弹窗 -->
		<uni-popup ref="targetSelectPopup" type="bottom">
			<view class="multi-select-popup">
				<view class="popup-header">
					<text class="title">选择移动到的位置</text>
					<view class="header-right">
						<button 
							class="cancel-btn"
							@tap="cancelTargetSelect"
						>取消</button>
					</view>
				</view>
				
				<scroll-view 
					class="media-scroll"
					scroll-y
				>
					<view class="target-select-list">
						<view 
							class="target-item"
							v-for="media in availableTargets"
							:key="media.id"
							@tap="moveSelectedItems(media)"
						>
							<image 
								v-if="media.media_type === '图片'"
								:src="api.BASE_URL + media.media_url"
								mode="aspectFill"
								class="media-image"
							></image>
							<video
								v-else-if="media.media_type === '视频'"
								:src="api.BASE_URL + media.media_url"
								class="media-video"
							></video>
							<view class="order-badge">{{ media.order }}</view>
							<view class="move-here-tip">移动到这里</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { api } from '@/utils/request'
import { onLoad } from '@dcloudio/uni-app'

// 页面状态
const pageLoading = ref(true)
const loadingText = {
	contentdown: '上拉显示更多',
	contentrefresh: '加载中...',
	contentnomore: '没有更多数据了'
}

// 帖子ID
const postId = ref('')

// 媒体列表
const mediaList = ref([])
// 原始顺序
const originalOrder = ref([])

// 拖拽相关
const dragIndex = ref(-1)
const dragOffset = ref(0)
const startY = ref(0)
const itemHeight = ref(120) // 每个item的高度,单位px

// 提交状态
const submitting = ref(false)

// 序号输入相关
const orderPopup = ref(null)
const inputOrder = ref('')
const currentMedia = ref(null)

// 添加临时列表用于显示拖拽预览效果
const tempList = ref([])

// 布局相关
const layoutPopup = ref(null)
const layoutOptions = [
	{ name: '列表视图', value: 'list', icon: 'icon-icon-menu' },
	{ name: '九宫格', value: 'grid', icon: 'icon-iconfontzhizuobiaozhun0247' },
	{ name: '瀑布流', value: 'waterfall', icon: 'icon-pubuliu' }
]
const currentLayout = ref(layoutOptions[0])

// 是否有改动
const hasChanges = computed(() => {
	if(!mediaList.value.length || !originalOrder.value.length) return false
	
	return mediaList.value.some((media, index) => {
		const originalMedia = originalOrder.value.find(m => m.id === media.id)
		return media.order !== originalMedia.order
	})
})

// 添加多选相关的状态
const isMultiSelect = ref(false) // 是否处于多选模式
const selectedItems = ref([]) // 已选中的项
const targetPosition = ref(null) // 目标位置

// 获取媒体顺序
const getMediaOrder = async () => {
	try {
		const res = await api.request({
			url: '/api/post/get_post_order/',
			method: 'GET',
			data: {
				post_id: postId.value
			}
		})
		
		if(res.code === 200) {
			// 按order排序
			mediaList.value = res.data.sort((a, b) => a.order - b.order)
			// 保存原始顺序 - 保存完整的媒体数据
			originalOrder.value = JSON.parse(JSON.stringify(mediaList.value))
		}
	} catch(err) {
		console.error('获取媒体顺序失败', err)
		uni.showToast({
			title: '获取数据失败',
			icon: 'none'
		})
	} finally {
		pageLoading.value = false
	}
}

// 修改开始拖拽方法
const startDrag = (e) => {
	const index = e.currentTarget.dataset.index
	dragIndex.value = index
	startY.value = e.touches[0].clientY
	// 保存开始拖拽时的列表状态
	tempList.value = [...mediaList.value]
}

// 修改拖拽中的方法
const onDrag = (e) => {
	if(dragIndex.value === -1) return
	
	const moveY = e.touches[0].clientY - startY.value
	dragOffset.value = moveY
	
	// 计算目标位置
	const targetIndex = Math.round(moveY / itemHeight.value) + dragIndex.value
	
	// 确保在有效范围内
	if(targetIndex >= 0 && targetIndex < mediaList.value.length) {
		// 更新临时显示列表，保持其他项位置不变
		const newList = [...mediaList.value]
		const draggedItem = newList[dragIndex.value]
		
		// 移除拖动项
		newList.splice(dragIndex.value, 1)
		// 在目标位置插入
		newList.splice(targetIndex, 0, draggedItem)
		
		tempList.value = newList
	}
}

// 修改结束拖拽方法
const endDrag = () => {
	if(dragIndex.value === -1) return
	
	// 计算最终位置
	const finalIndex = Math.round(dragOffset.value / itemHeight.value) + dragIndex.value
	
	if(finalIndex >= 0 && finalIndex < mediaList.value.length && finalIndex !== dragIndex.value) {
		// 获取拖动项和目标项的order
		const draggedItem = mediaList.value[dragIndex.value]
		const targetItem = mediaList.value[finalIndex]
		const draggedOrder = draggedItem.order
		const targetOrder = targetItem.order
		
		// 更新实际列表
		const newList = [...mediaList.value]
		
		// 直接交换两个位置的order
		newList.forEach(media => {
			if(media.id === draggedItem.id) {
				media.order = targetOrder
			} else if(media.id === targetItem.id) {
				media.order = draggedOrder
			}
		})
		
		// 重新排序列表
		mediaList.value = newList.sort((a, b) => a.order - b.order)
	}
	
	// 重置状态
	dragIndex.value = -1
	dragOffset.value = 0
	tempList.value = []
}

// 修改显示序号输入弹窗方法
const showOrderInput = (media) => {
	console.log('选中的媒体:', media) // 调试用
	currentMedia.value = media
	inputOrder.value = media.order.toString()
	// 确保popup组件已经挂载
	nextTick(() => {
		if(orderPopup.value) {
			orderPopup.value.open()
		} else {
			console.error('popup组件未找到') // 调试用
		}
	})
}

// 添加输入确认处理
const handleInputConfirm = (e) => {
	const value = e.detail.value || inputOrder.value
	confirmOrder(value)
}

// 修改确认修改序号方法
const confirmOrder = (value) => {
	console.log('输入值:', value, '当前输入框值:', inputOrder.value) // 调试用
	
	// 优先使用输入框的值
	const finalValue = value || inputOrder.value
	
	// 确保value不为空
	if(!finalValue) {
		uni.showToast({
			title: '请输入序号',
			icon: 'none'
		})
		return
	}
	
	const newOrder = parseInt(finalValue)
	console.log('解析后的序号:', newOrder) // 调试用
	
	// 验证输入
	if(isNaN(newOrder)) {
		uni.showToast({
			title: '请输入有效数字',
			icon: 'none'
		})
		return
	}
	
	// 验证当前选中的媒体
	if(!currentMedia.value) {
		uni.showToast({
			title: '请重新选择要修改的项',
			icon: 'none'
		})
		return
	}
	
	// 验证order是否存在于列表中
	const targetMedia = mediaList.value.find(media => media.order === newOrder)
	console.log('目标媒体:', targetMedia) // 调试用
	
	if(!targetMedia) {
		uni.showToast({
			title: '请输入列表中存在的序号',
			icon: 'none'
		})
		return
	}
	
	const currentOrder = currentMedia.value.order
	if(newOrder === currentOrder) {
		closeOrderPopup()
		return
	}
	
	// 直接交换两个位置的order
	const newList = [...mediaList.value]
	newList.forEach(media => {
		if(media.id === currentMedia.value.id) {
			media.order = newOrder
		} else if(media.id === targetMedia.id) {
			media.order = currentOrder
		}
	})
	
	// 重新排序列表
	mediaList.value = newList.sort((a, b) => a.order - b.order)
	
	closeOrderPopup()
	
	// 显示成功提示
	uni.showToast({
		title: '序号已修改',
		icon: 'success'
	})
}

// 修改关闭序号输入弹窗方法
const closeOrderPopup = () => {
	currentMedia.value = null
	inputOrder.value = ''
	orderPopup.value?.close()
}

// 保存顺序
const saveOrder = async () => {
	if(submitting.value) return
	
	submitting.value = true
	try {
		// 构建修改列表
		const changedList = mediaList.value
			.filter(media => {
				const originalMedia = originalOrder.value.find(m => m.id === media.id)
				return media.order !== originalMedia.order
			})
			.map(media => [media.id, media.order])
		
		if(changedList.length === 0) {
			uni.showToast({
				title: '顺序未改变',
				icon: 'none'
			})
			submitting.value = false
			return
		}
		
		console.log('修改列表:', changedList)
		
		const res = await api.request({
			url: '/api/post/edit_post_media_order/',
			method: 'GET',
			data: {
				post_id: postId.value,
				media_list: JSON.stringify([JSON.stringify(changedList)])
			}
		})
		
		if(res.code === 200) {
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			})
			
			// 更新原始顺序
			originalOrder.value = JSON.parse(JSON.stringify(mediaList.value))
			
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		} else {
			uni.showToast({
				title: res.message || '保存失败',
				icon: 'none'
			})
		}
	} catch(err) {
		console.error('保存失败', err)
		uni.showToast({
			title: err.message || '保存失败',
			icon: 'none'
		})
	} finally {
		submitting.value = false
	}
}

// 显示布局选项
const showLayoutOptions = () => {
	layoutPopup.value?.open()
}

// 关闭布局选项
const closeLayoutPopup = () => {
	layoutPopup.value?.close()
}

// 选择布局
const selectLayout = (layout) => {
	currentLayout.value = layout
	closeLayoutPopup()
}

// 切换多选模式
const toggleMultiSelect = () => {
	isMultiSelect.value = !isMultiSelect.value
	if(isMultiSelect.value) {
		selectedItems.value = []
		multiSelectPopup.value?.open()
	} else {
		multiSelectPopup.value?.close()
		targetSelectPopup.value?.close()
	}
}

// 选择/取消选择项
const toggleSelect = (media) => {
	if(!isMultiSelect.value) return
	
	const index = selectedItems.value.findIndex(item => item.id === media.id)
	if(index > -1) {
		selectedItems.value.splice(index, 1)
	} else {
		selectedItems.value.push(media)
	}
}

// 修改移动选中的项到目标位置的方法
const moveSelectedItems = (targetMedia) => {
	if(selectedItems.value.length === 0) return
	
	// 不能移动到选中项中的位置
	if(selectedItems.value.some(item => item.id === targetMedia.id)) {
		uni.showToast({
			title: '不能移动到选中项的位置',
			icon: 'none'
		})
		return
	}
	
	const newList = [...mediaList.value]
	const targetIndex = newList.findIndex(item => item.id === targetMedia.id)
	
	// 获取选中项的原始索引，并按照索引从大到小排序，避免删除时影响后续索引
	const selectedIndexes = selectedItems.value
		.map(item => newList.findIndex(media => media.id === item.id))
		.sort((a, b) => b - a)
	
	// 保存选中的项
	const itemsToMove = selectedItems.value.slice()
	
	// 从后往前删除选中的项，这样不会影响前面项的索引
	selectedIndexes.forEach(index => {
		newList.splice(index, 1)
	})
	
	// 计算实际插入位置
	// 如果目标位置在删除的项后面，需要调整插入位置
	const insertIndex = targetIndex - selectedIndexes.filter(index => index < targetIndex).length
	
	// 在目标位置后插入选中的项
	newList.splice(insertIndex + 1, 0, ...itemsToMove)
	
	// 重新分配order
	newList.forEach((media, index) => {
		media.order = index + 1
	})
	
	// 更新列表
	mediaList.value = newList
	
	// 清空选择并关闭弹窗
	selectedItems.value = []
	isMultiSelect.value = false
	multiSelectPopup.value?.close()
	targetSelectPopup.value?.close()
	
	// 显示成功提示
	uni.showToast({
		title: '移动成功',
		icon: 'success'
	})
}

// 修改媒体项点击处理
const handleItemClick = (media) => {
	if(isMultiSelect.value) {
		toggleSelect(media)
	} else {
		showOrderInput(media)
	}
}

// 计算可用的目标位置（排除已选中的项）
const availableTargets = computed(() => {
	return mediaList.value.filter(media => 
		!selectedItems.value.some(item => item.id === media.id)
	)
})

// 显示目标选择弹窗
const showTargetSelect = () => {
	if(selectedItems.value.length === 0) return
	multiSelectPopup.value?.close()
	targetSelectPopup.value?.open()
}

// 取消目标选择
const cancelTargetSelect = () => {
	targetSelectPopup.value?.close()
	multiSelectPopup.value?.open()
}

// 弹窗引用
const multiSelectPopup = ref(null)
const targetSelectPopup = ref(null)

onLoad((options) => {
	if(!options.post_id) {
		uni.navigateBack()
		return
	}
	
	postId.value = options.post_id
	getMediaOrder()
})
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 20rpx;
	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	position: relative; // 添加相对定位
}

.loading-wrapper {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

.content {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	
	.tip-bar {
		flex: 1;
	}
	
	.action-buttons {
		display: flex;
		gap: 16rpx;
		
		.action-btn {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 12rpx 20rpx;
			background: #f5f5f5;
			border-radius: 32rpx;
			
			&.active {
				background: #007AFF;
				
				text {
					color: #fff;
				}
			}
			
			text {
				font-size: 24rpx;
				color: #666;
			}
			
			&:active {
				opacity: 0.8;
			}
		}
	}
}

.media-list {
	position: relative;
	touch-action: pan-y pinch-zoom;
	
	// 列表视图样式
	&.list {
		.media-item {
			margin-bottom: 20rpx;
			
			.media-preview {
				height: 160rpx; // 固定高度
				
				.preview-image,
				.preview-video {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}
	
	// 九宫格样式
	&.grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		
		.media-item {
			margin: 0;
			flex-direction: column; // 改为纵向排列
			padding: 10rpx;
			
			.order-num {
				margin: 0 0 10rpx 0; // 调整序号位置
			}
			
			.media-preview {
				width: 100%;
				aspect-ratio: 1;
				
				.preview-image,
				.preview-video {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}
	
	// 瀑布流样式
	&.waterfall {
		column-count: 2;
		column-gap: 20rpx;
		
		.media-item {
			break-inside: avoid;
			margin-bottom: 20rpx;
			flex-direction: column;
			padding: 10rpx;
			
			.order-num {
				margin: 0 0 10rpx 0;
			}
			
			.media-preview {
				width: 100%;
				aspect-ratio: 1;
				
				.preview-image,
				.preview-video {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}
	
	.media-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #fff;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		transition: transform 0.2s;
		
		&.dragging {
			position: relative;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
			background: #f8f8f8;
			opacity: 0.9;
		}
		
		&.selected {
			background: #f0f7ff;
			border-color: #007AFF;
		}
		
		.order-num {
			min-width: 40rpx; // 添加最小宽度
			height: 40rpx;
			background: #f5f5f5;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #666;
			margin-right: 20rpx;
			flex-shrink: 0; // 防止序号被压缩
			
			&:active {
				background: #e0e0e0;
			}
		}
		
		.media-preview {
			flex: 1;
			overflow: hidden;
			background: #f8f8f8;
			border-radius: 8rpx;
			
			.preview-image,
			.preview-video {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			
			&:active {
				opacity: 0.8;
			}
		}
		
		.select-mark {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;
			
			&.active {
				background: #007AFF;
				
				.iconfont {
					color: #fff;
				}
			}
			
			.iconfont {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}

.bottom-btns {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999; // 提高z-index
	background: #fff;
	padding: 20rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
	
	.save-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #007AFF;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		margin: 0;
		
		&:disabled {
			opacity: 0.5;
			background: #ccc;
		}
		
		&:active {
			opacity: 0.8;
		}
	}
}

// 添加输入框样式
.uni-input {
	height: 80rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
	padding: 0 20rpx;
	margin-top: 20rpx;
	font-size: 28rpx;
}

.input-wrapper {
	padding: 20rpx 0;
}

// 布局选择弹窗样式
.layout-options {
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx;
	
	.title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	
	.options-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		margin-bottom: 30rpx;
		
		.option-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12rpx;
			padding: 20rpx;
			border-radius: 12rpx;
			
			text {
				font-size: 28rpx;
				color: #666;
			}
			
			&.active {
				background: #f0f7ff;
				
				text {
					color: #007AFF;
				}
			}
			
			&:active {
				background: #f5f5f5;
			}
		}
	}
	
	.cancel-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #f5f5f5;
		color: #666;
		font-size: 32rpx;
		border-radius: 44rpx;
		margin: 0;
		
		&:active {
			background: #e0e0e0;
		}
	}
}

.move-tip {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(140rpx + env(safe-area-inset-bottom));
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 28rpx;
	padding: 20rpx;
	text-align: center;
	z-index: 999;
}

.multi-select-popup {
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	height: 80vh;
	display: flex;
	flex-direction: column;
	
	.popup-header {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		
		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
		
		.header-right {
			display: flex;
			align-items: center;
			gap: 20rpx;
			
			.selected-count {
				font-size: 28rpx;
				color: #666;
			}
			
			.confirm-btn,
			.cancel-btn {
				margin: 0;
				padding: 12rpx 30rpx;
				font-size: 28rpx;
				background: #007AFF;
				color: #fff;
				border-radius: 32rpx;
				
				&:disabled {
					opacity: 0.5;
					background: #ccc;
				}
				
				&:active {
					opacity: 0.8;
				}
			}
			
			.cancel-btn {
				background: #f5f5f5;
				color: #666;
			}
		}
	}
	
	.media-scroll {
		flex: 1;
		height: 0;
	}
	
	.multi-select-list,
	.target-select-list {
		padding: 20rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		
		.select-item,
		.target-item {
			position: relative;
			border-radius: 12rpx;
			overflow: hidden;
			
			.media-content {
				aspect-ratio: 1;
				position: relative;
			}
			
			.media-image,
			.media-video {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			
			.order-badge {
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				min-width: 40rpx;
				height: 40rpx;
				background: rgba(0, 0, 0, 0.5);
				color: #fff;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}
			
			.select-mark {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.8);
				display: flex;
				align-items: center;
				justify-content: center;
				
				.iconfont {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			&.active {
				.select-mark {
					background: #007AFF;
					
					.iconfont {
						color: #fff;
					}
				}
			}
			
			.move-here-tip {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 10rpx;
				background: rgba(0, 0, 0, 0.5);
				color: #fff;
				font-size: 24rpx;
				text-align: center;
			}
			
			&:active {
				opacity: 0.8;
			}
		}
	}
}
</style> 